<template>
  <el-row style="height: 60px">
    <el-col id="header_right">
      <el-col :span="14">
        <el-menu class="el-menu-demo" mode="horizontal" background-color="#545c64"
                 text-color="#fff"
                 active-text-color="#ffd04b">
            <el-menu-item v-for="item in rootMenu" index="item.path" @click="handleMenuClick(item)">

              <i :class="item.icon"></i>
              <span> {{item.label}}</span>
            </el-menu-item>
        </el-menu>
      </el-col>
      <el-col :span="5">
        <el-input v-model="search" placeholder="搜索..." size="small" type="text">
          <el-button slot="append" icon="el-icon-search" type="text"></el-button>
        </el-input>
      </el-col>
      <el-col :span="1">
        <el-badge is-dot class="item" style="height: 40px; line-height: 40px">
          <el-button type="text"><span> <i class="el-icon-message-solid"></i></span></el-button>

        </el-badge>
      </el-col>
      <el-col :span="3">
        <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
        <el-button type="text"><a href="http://localhost:8888/api/swagger-ui.html" target="_blank"><span>admin<i class="el-icon-setting"></i></span></a></el-button>
      </el-col>
    </el-col>


  </el-row>

</template>

<script>
  import SysMenuApi from "@/api/system/SysMenuApi";
  export default {
    name: "Header",
    data() {
      return {
        background_color: "lightskyblue",
        search: '',
        rootMenu:[],
      }
    },
    created() {
      this.findAllRootMenu();
    },
    methods:{
      findAllRootMenu(){
        SysMenuApi.findAllRootMenu().then(res=>{

          this.rootMenu = res.data;
        })
      },
      handleMenuClick(item){
        console.log(item);
        this.$emit('findAllMenu', item.id)
      },
    }
  }
</script>

<style scoped>

  #header_right {
    background: #545c64;
    /*background: black;*/
    line-height: 60px;
    text-align: center;
    color: white;
    height: 60px;
  }


</style>
